<div class="prompt-info">
  <i class="iconfont icon-tishi"></i>合理设置商品分类能方便将商品填写到货架，并进行及时的管理
</div>
<div class="show-group">
  <div class="grid-item">
    <div class="grid-title">商品名称</div>
    <input type="text" class="form-control" name="keyword" [(ngModel)]="keyword">
  </div>
  <div class="grid-item">
    <div class="grid-title">商品分类</div>
    <select class="form-control" name="groupId" [(ngModel)]="groupId">
      <option value="0">全部分类</option>
      <option *ngFor="let item of groupList" value="{{item.id}}">{{item.name}}</option>
    </select>
  </div>
  <div class="grid-item">
    <div class="grid-title">商品销量</div>
    <select name="order" class="form-control" [(ngModel)]="order">
      <option value="none">选择排序方式</option>
      <option value='{"sales_total": "desc"}'>按商品销量</option>
      <option value='{"price": "desc"}'>按商品价格</option>
      <option value='{"created_at": "desc"}'>商品创建时间</option>
    </select>
  </div>
  <div class="grid-item">
    <div class="grid-title">&nbsp;</div>
    <button class="btn btn-green" (click)="search()">搜索</button>
    <button class="btn" (click)="reset()">重置</button>
  </div>
</div>
<div class="btn-line mt-70">
  <span class="tab-nav" [ngClass]="{'active': status === '上架'}" (click)="changeStatusList('上架')">已上架商品</span>
  <span class="tab-nav" [ngClass]="{'active': status === '下架'}" (click)="changeStatusList('下架')">未上架商品</span>
</div>
<div class="btn-line">
  <button class="btn btn-default" *ngIf="status === '上架'" (click)="changeGoodsStatus('下架')">下架</button>
  <button class="btn btn-default" *ngIf="status === '下架'" (click)="changeGoodsStatus('上架')">上架</button>
</div>
<div class="loading" [hidden]="!loadingShow">
  <app-loading></app-loading>
</div>
<table class="table" *ngIf="!loadingShow">
  <thead>
    <tr>
      <th><input type="checkbox" [(ngModel)]="isCheckedAll" [checked]="isCheckedAll" (click)="checkedAll()"></th>
      <th>商品(已选择{{checkedGoods.length}}个)</th>
      <th>价格</th>
      <th>库存</th>
      <th>总销量</th>
      <th>所属分类</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of goodsList">
      <td><input type="checkbox" [(ngModel)]="item.selected" [checked]="item.selected" (click)="selectedGoods(item)"></td>
      <td>
        <img src="{{item.first_picture?aliyunOssOutputUrl+'/'+item.first_picture:''}}" alt="">
        <span class="goods-name"><span class="goods-name-omit" title="{{item.name}}">{{item.name}}</span></span>
      </td>
      <td>￥ {{item.price/1000}}</td>
      <td>{{item.in_stock}}</td>
      <td>{{item.sales_total}}</td>
      <td><span class="mr-5" *ngFor="let item2 of item.goods_category">{{item2.name}}</span></td>
      <td>
        <a href="javascript:;" *ngIf="status === '上架'" (click)="changeGoodsStatus('下架',item.id)">下架</a>
        <a href="javascript:;" *ngIf="status === '下架'" (click)="changeGoodsStatus('上架',item.id)">上架</a>
      </td>
    </tr>
  </tbody>
</table>
<div class="text-center" *ngIf="currentPage>=1">
  <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage" [maxSize]="5"
              previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="isShow = $event;"></app-notification>
